<div class="LoginRegisterHeader">
    <div class="BackBtn"><a href="javascript:history.go(-1)"><img src="__CDN__/map/images/return_black.png" alt="返回"/></a></div>
    <div class="LoginRegisterHeaderTitle dmColor2">找回密码</div>
</div>
<form action="" method="post">
    <div class="ForgetPasswordMian">
        <div class="LoginBoxInput">
            <input type="text" value="" id="mobile" name="name" placeholder="请输入您的手机号"/>
        </div>
        <div class="LoginBoxInput">
            <input class="verificationCodeInput" type="text" value="" name="captcha" placeholder="请输入您的验证码"/>
            {:token()}
            <button class="verificationCodeBtn gradualBg">获取验证码</button>
        </div>
        <div class="LoginBoxInput">
            <input data-msg="8-16数字加字母" type="password" value="" name="newpassword" placeholder="请输入您的新密码"/>
            <span></span>
        </div>
        <div class="LoginBoxInput">
            <input type="password" value="" name="renewpassword" placeholder="请再次输入您的新密码"/>
            <span></span>
        </div>
        <div class="LoginBoxBtn">
            <input type="button" id="submit" value="完成" disabled="true" >
        </div>
    </div>
</form>
<style>
    /*新增样式*/
    .LoginBoxInput{overflow: visible;}
    .LoginBoxInput span{color:red;}
    .verificationCodeBtn {
        width: auto !important;
        padding:0 0.1rem;
    }
</style>
<script type="text/javascript" src="__CDN__/assets/js/jquery.form.js"></script>
<script type="text/javascript">
    var countdown=60;
    $(document).on('click','.verificationCodeBtn',function(){
        var obj = $(this)
        var mobile= $('#mobile').val();
        if (mobile != "") {
            if (!(/^((\d{3}-\d{8}|\d{4}-\d{7,8})|(1[3|5|7|8][0-9]{9}))$/.test(mobile))) {
                alert("手机号填写的格式不对，请正确填写");
                return false;
            }else{
                $.ajax({
                    type:"GET",
                    url:'{:url("/api/sms/send")}?event=changepwd&mobile='+mobile,
                    dataType:"json",
                    success:function(data){

                        if(data.code == 1){
                            settime(obj)
                            // $("input[name='captcha']").val(data.data);
                        }else{
                            alert(data.msg)
                            return false;
                        }
                    },
                    error:function(jqXHR){
                        console.log("Error: "+jqXHR.status);
                    }
                });
            }

        }else if(mobile ==''){
            alert("手机号不能为空");
            return false;
        }
        return false;
    })
    function settime(obj) { //发送验证码倒计时
        if (countdown == 0) {
            obj.attr('disabled',false);
            obj.addClass("gradualBg");
            obj.text("获取验证码");
            countdown = 60;
            return;
        } else {
            obj.attr('disabled',true);
            obj.removeClass("gradualBg");
            obj.html("重新发送(" + countdown + ")");
            countdown--;
        }
        setTimeout(() =>{settime(obj) },1000)
    }

    //验证
    var bol= false;

    $(document).on('input','.LoginBoxInput input',function(){
        inputchange()
        var obj =$('#submit')
        if(!bol){
            obj.attr('disabled',false);
            obj.addClass("gradualBg");
        }else{
            obj.attr('disabled',true);
            obj.removeClass("gradualBg");
        }
    })
    function inputchange(){
        $('.LoginBoxInput').each(function(){
            var that = $(this)
            var val =that.find('input').val()
            if(val.length<=0){
                bol = true
            }else{
                bol = false
            }
        })
    }

    $('#submit').on('click',function () {
        if($('input[name="name"]').val().length<=6){
            $('input[name="name"]').parent(".LoginBoxInput").css("border-bottom-color","red")
            return false
        }else{
            $('input[name="name"]').parent(".LoginBoxInput").css("border-bottom-color","#F3F3F3")
            $("form").ajaxSubmit(function (e) {
                if(e.code==1){
                    alert('操作成功');
                    window.location.href="{:url('user/login')}";
                }else{
                    alert(e.msg);
                }

            })
        }
    })
    //新增
    $(".LoginBoxInput").on('focus','[name=newpassword]',function(){
        var msg = $(this).attr("data-msg");
        $(this).next().html(msg);
    }).on('blur','input',function(){
        var reg = new RegExp('^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$');
        if(!reg.test($(this).val())){$(this).next().html("您所输入的密码有误，请重新输入");$(this).next().show();}else{
            $(this).next().html("输入正确");$(this).next().show();setTimeout(()=>{$(this).next().hide();},5000)
        }
    });
    $(".LoginBoxInput").on('blur','[name=renewpassword]',function(){
        if($(this).val() && $(this).val() === $('[name=newpassword]').val()){
            $(this).next().html("输入正确");
            $(this).next().show();
        }else{
            $(this).next().html("两个密码输入不一致，请重新输入");$(this).next().show();setTimeout(()=>{$(this).next().hide();},5000)
        }
    });
</script>
